<template>
  <div class="usual_dress">
     <header>
       <p><img src="../assets/img/left@2x.png" ></p>
       <p>常用地址</p>
       <p></p>
     </header>
      <div class="dress_cnt">
        <ul>
          <li v-for = "item in dressList">
            <span>{{item.thedrees}}</span>
            <span><img src="../assets/img/deleter.png" ></span>
          </li>
          <li>
            <span>北京E东国际教学楼</span>
            <span><img src="../assets/img/deleter.png" ></span>
          </li>
          <li>
            <span>艺术传媒职业学院</span>
            <span><img src="../assets/img/deleter.png" ></span>
          </li>
        </ul>
        <div class="click_add">
          <p><img src="../assets/img/add@2x.png" ></p>
          <p>点击添加地址</p>
        </div>
        <div class="btn">确定</div>
      </div>
  </div>
</template>


<script>

import axios from 'axios';

export default {
  name: 'usual_dress',
  data () {
    return {
      dressList: []
    }
  },
  mounted () {
    var self = this;
    axios.get('http://127.0.0.1:9999/etc/listData').then(function(rep) { 
      console.log(rep)
        self.dressList = rep.data
        console.log(rep.data)
       
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='less'>

@import '.././assets/less/style.less';
.usual_dress{
  header {
    .px2rem(height,88);
      background: #21d094;
      display: flex;
      align-items: center;
      justify-content: space-between;
      /* .border(1,solid,#000); */
      p:nth-child(1) {
        flex: 1;
        .font(30,#fff);
        .padding-left(35);
        img {
          .px2rem(height,39);
          .px2rem(width,39);
        }
      }
      p:nth-child(2) {
        flex: 2;
        text-align: center;
        .font(30,#fff);
      }
      p:nth-child(3) {
        flex: 1;
        .font(30,#fff);
      }
  }
  .dress_cnt {
    width: 92%;
    margin: auto;
    ul {
      li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .line-height(108);
        .font(32,#424242);
        .border-bottom(1,solid,#dbdbdb);
        span:nth-child(1){
          display: block;
        }
        span:nth-child(2){
          display: block;
          img {
            display: block;
            .px2rem(height,42);
            .px2rem(width,42);
          }
        }
      }
    }
    .click_add {
      display: flex;
      justify-content: center;
      .border(2,solid,#b9b9b9);
      width: 36%;
      .padding(15,0,15,0);
      .border-radius(5);
      .margin-top(32);
      p:nth-child(1){
        img {
          .px2rem(height,32);
          .px2rem(width,32);
        }
      }
      p:nth-child(2){
        .font(28,#a6a6a6);
      }
    }
    .btn {
      .line-height(78);
      text-align: center;
      background: #4aba80;
      .font(34,#fff);
      .margin-top(40);
    }
  }
}
</style>
